<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8" />
  <title></title>
  <meta name="keywords" content="" />
  <meta name="description" content="" />
  <link rel="stylesheet" href="css/main.css" />
  <link rel="stylesheet" href="css/home.css" />
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css" />
</head>

<body>
  <div class="console-home" id="home" v-cloak>
    <div class="left">
      <el-menu :default-active="menu_active" class="el-menu-vertical-demo" @open="handleOpen" @close="handleClose"
        :collapse="isCollapse">
        <el-menu-item @click="menuClick(item)" :index="item.index" v-for="(item,index) in menu_list">
          <i :class="item.icon"></i>
          <span slot="title">{{item.title}}</span>
        </el-menu-item>
      </el-menu>
    </div>
    <div class="console-main">
      <div class="main cate-main">
        <div class="header">
          <el-input v-model="seek" placeholder="请输入搜索内容" class="el-seek" clearable @clear="dataListFn()"
            @keyup.enter.native="seekFn()" v-if="menu_active === '/game'">
            <el-button slot="append" icon="el-icon-search" @click="seekFn()">搜索</el-button>
          </el-input>
          <el-button type="primary" plain icon="el-icon-plus" @click="operFn('add','')">新增</el-button>
        </div>
        <div class="content">
          <el-table :data="data_list" border style="width: 100%;">
            <el-table-column :prop="item.key" :label="item.name" align="center" v-for="item in tab_head">
              <!-- <template slot-scope="scope">
                {{timeInit(scope.row.add_time*1000,'all')}}
              </template> -->
            </el-table-column>
            <el-table-column label="操作" align="center" width="150">
              <template slot-scope="scope">
                <el-button-group class="button-list">
                  <el-button size="mini" @click="operFn('edit',scope.row)">
                    编辑
                  </el-button>
                  <el-button size="mini" @click="operFn('del',scope.row)" v-if="menu_active !== '/settings'">
                    删除
                  </el-button>
                </el-button-group>
              </template>
            </el-table-column>
          </el-table>
          <div class="pagination">
            <el-pagination background layout="total, prev, pager, next" :total="total" :current-page="param.page"
              :page-size="param.size" @current-change="handlePageChange"></el-pagination>
          </div>
        </div>
      </div>
    </div>
    <!-- 新增/编辑 标语 -->
    <el-dialog title="编辑" :visible.sync="msg_open_dialog" width="50%">
      <el-form ref="edit_msg" :model="edit_msg" :rules="msg_rules" label-width="100px">
        <el-form-item label="标语" prop="text">
          <el-input v-model="edit_msg.text" placeholder="请输入标语"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openClose()">取 消</el-button>
        <el-button type="primary" @click="changeMsgFn()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 新增/编辑 分类 -->
    <el-dialog title="添加/编辑" :visible.sync="cate_open_dialog" width="50%">
      <el-form ref="edit_cate" :model="edit_cate" :rules="cate_rules" label-width="100px">
        <el-form-item label="分类名称" prop="title">
          <el-input v-model="edit_cate.title" placeholder="请输入分类名称"></el-input>
        </el-form-item>
        <el-form-item label="分类排序" prop="sort">
          <el-input v-model="edit_cate.sort" placeholder="请输入分类排序"></el-input>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openClose()">取 消</el-button>
        <el-button type="primary" @click="cateChangeData()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 游戏编辑/新增 -->
    <el-dialog title="添加/编辑" :visible.sync="game_open_dialog" width="50%">
      <el-form ref="edit_game" :model="edit_game" :rules="game_rules" label-width="100px">
        <el-form-item label="名称" prop="title">
          <el-input v-model="edit_game.title" placeholder="请输入名称"></el-input>
        </el-form-item>
        <el-form-item label="简介" prop="desc">
          <el-input v-model="edit_game.desc" placeholder="请输入简介"></el-input>
        </el-form-item>
        <el-form-item label="分类" prop="cate_id">
          <el-select v-model="edit_game.cate_id" placeholder="请选择">
            <el-option v-for="item in type_list" :key="item.cate_id" :label="item.title" :value="item.cate_id">
            </el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="openClose()">取 消</el-button>
        <el-button type="primary" @click="gameChangeData()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</body>
<script src="https://cdn.jsdelivr.net/npm/vue"></script>
<script src="https://cdn.staticfile.org/axios/0.18.0/axios.min.js"></script>
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<script>
  new Vue({
    el: '#home',
    data: {
      url: 'api.php',
      menu_list: [],
      menu_active: '',
      // 分类列表
      type_list: [],
      cate_open_dialog: false,
      // 分类操作
      edit_cate: {
        title: '',
        sort: 0,
        cate_id: 0
      },
      // 分类验证
      cate_rules: {
        title: [{ required: true, message: '请输入分类名称', trigger: 'blur' }],
        sort: [{ required: true, message: '请输入分类排序', trigger: 'blur' }],
      },
      // 列表参数
      param: {
        page: 1,
        page_size: 10,
        keyWord: ''
      },
      game_open_dialog: false,
      // 游戏列表操作
      edit_game: {
        title: '',
        desc: '',
        cate_id: 1,
        game_id: 0
      },
      // 表头
      tab_head: [],
      // 表内容
      data_list: [],
      // 搜索
      seek: '',
      // 总页码
      total: 0,
      // 规则
      game_rules: {
        title: [
          { required: true, message: '请输入名称', trigger: 'blur' },
        ],
        desc: [
          { required: true, message: '请输入简介', trigger: 'blur' },
        ],
        cate_id: [
          { required: true, message: '请选择分类', trigger: 'blur' },
        ],
      },
      open_info: {},
      isCollapse: false,
      msg_open_dialog: false,
      // 标语验证
      msg_rules: {
        text: [{ required: true, message: '请输入标语', trigger: 'blur' }]
      },
      edit_msg: { type: 1, text: '' }
    },
    mounted() {
      this.token = window.localStorage.getItem('token')
      this.menuFn()
      this.typeLiatFn()
    },
    methods: {
      // 获取目录
      menuFn() {
        axios.post(this.url + '/admin/menu_list', { token_admin: this.token }).then((s) => {
          console.log(s.data)
          if (s.data.code === 10000) {
            this.menu_list = s.data.data
            this.menu_active = s.data.data[0].index
            this.dataListFn()
          } else {
            this.$message.error(s.message)
          }
        }).catch(() => {
          this.$message.error('异常错误，登陆失败')
        })
      },
      // 点击目录
      menuClick(obj) {
        console.log(obj)
        this.menu_active = obj.index
        this.param = {
          page: 1,
          page_size: 10,
        }
        if (obj.index === '/settings') {
          this.getMsgFn()
        } else {
          this.dataListFn()
        }

      },
      // 操作
      operFn(type, obj) {
        if (this.menu_active === '/game') {
          this.gameChangeFn(type, obj)
        } else if (this.menu_active === '/cate') {
          this.cateChangeFn(type, obj)
        } else if (this.menu_active === '/settings') {
          this.operMsgFn(type, obj)
        }
      },
      // 分类操作
      cateChangeFn(type, obj) {
        console.log(type, obj)
        if (type === 'add') {
          this.cate_open_dialog = true
          this.edit_cate = {
            title: '',
            sort: 0,
            cate_id: 0
          }
        } else if (type === 'edit') {
          this.cate_open_dialog = true
          this.edit_cate = obj
        } else if (type === 'del') {
          this.edit_cate = obj
          this.$confirm('是否删除该分类？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.ajaxFn('/admin/del_cate', this.edit_cate, '删除成功')
            this.dataListFn()
          }).catch(() => {
            this.$message.info('已取消')
          })
        }
        this.open_type = type
      },
      // 分类编辑
      cateChangeData() {
        this.$refs.edit_cate.validate((valid) => {
          if (valid) {
            this.ajaxFn('/admin/update_cate', this.edit_cate, '编辑成功')
            this.dataListFn()
            this.cate_open_dialog = false
          } else {
            this.$message.error('请检查内容是否已输入完成')
            return false
          }
        })
      },
      // 游戏操作
      gameChangeFn(type, obj) {
        console.log(type, obj)
        if (type === 'add') {
          this.game_open_dialog = true
          this.edit_game = {
            title: '',
            desc: '',
            cate_id: 1,
            game_id: 0
          }
        } else if (type === 'edit') {
          this.game_open_dialog = true
          this.edit_game = obj
        } else if (type === 'del') {
          this.edit_game = obj
          this.$confirm('是否删除该分类？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
          }).then(() => {
            this.ajaxFn('/admin/del_game', this.edit_game, '删除成功')
            this.dataListFn()
          }).catch(() => {
            this.$message.info('已取消')
          })
        }
        this.open_type = type
      },
      // 游戏/分类 列表
      dataListFn() {
        let url = ''
        if (this.menu_active === '/game') {
          url = '/admin/game_list'
        } else if (this.menu_active === '/cate') {
          url = '/admin/cate_list'
        }
        axios.post(this.url + url, this.param).then((s) => {
          if (s.data.code === 10000) {
            this.tab_head = s.data.data.tab_head
            this.data_list = s.data.data.list
            this.total = s.data.data.cnt_data
          } else {
            this.$message.error(s.message)
          }
        }).catch(() => {
          this.$message.error('异常错误，登陆失败')
        })
      },
      typeLiatFn() {
        axios.post(this.url + '/admin/cate_list', { page: 1, page_size: 100 }).then((s) => {
          if (s.data.code === 10000) {
            this.type_list = s.data.data.list
          } else {
            this.$message.error(s.message)
          }
        }).catch(() => {
          this.$message.error('异常错误，登陆失败')
        })
      },
      // 分页切换
      handlePageChange(val) {
        this.$set(this.param, 'page', val)
        this.dataListFn()
      },
      // 标语操作
      operMsgFn(type, obj) {
        console.log(type, obj)
        this.edit_msg = obj
        this.msg_open_dialog = true
      },
      changeMsgFn() {
        axios.post(this.url + '/admin/set_text', this.edit_msg).then((s) => {
          this.openClose()
        }).catch(function (error) {
          console.log(error)
        })
      },
      getMsgFn() {
        axios.post(this.url + '/game/get_text', { keyword: this.seek_cen }).then((s) => {
          this.tab_head = [{ key: "text", name: "标语" }]
          this.data_list = s.data.data
          this.total = s.data.data.length
        }).catch(function (error) {
          // 请求失败处理
          console.log(error)
        })
      },
      handleOpen(key, keyPath) {
        console.log(key, keyPath);
      },
      handleClose(key, keyPath) {
        console.log(key, keyPath);
      },
      seekFn() {
        this.param = {
          page: 1,
          page_size: 10,
          keyword: this.seek,
        }
        this.dataListFn()
      },
      gameChangeData() {
        this.$refs.edit_game.validate((valid) => {
          if (valid) {
            this.ajaxFn('/admin/update_game', this.edit_game, '编辑成功')
            this.dataListFn()
            this.game_open_dialog = false
          } else {
            this.$message.error('请检查内容是否已输入完成')
            return false
          }
        })
      },
      ajaxFn(url, obj, text) {
        axios.post(this.url + url, obj).then((s) => {
          console.log(s.data)
          if (s.data.code === 10000) {
            this.$message.success(text)
            // this.openClose()
          } else {
            this.$message.error(s.message)
          }
        }).catch(() => {
          this.$message.error('异常错误，登陆失败')
        })
      },
      openClose() {
        this.cate_open_dialog = false
        this.game_open_dialog = false
        this.msg_open_dialog = false
        if (this.menu_active === '/settings') {
          this.getMsgFn()
        } else {
          this.dataListFn()
        }
      },
      timeInit(time, hour) {
        const Time = Number(time)
        const date = new Date(Time)
        const Y = date.getFullYear() + '-'
        const M =
          (date.getMonth() + 1 < 10
            ? '0' + (date.getMonth() + 1)
            : date.getMonth() + 1) + '-'
        const D = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
        const H =
          date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
        const Min =
          date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
        const Sec =
          date.getSeconds() < 10 ? '0' + date.getSeconds() : date.getSeconds()
        if (hour === 'all') {
          return Y + M + D + ' ' + H + ':' + Min + ':' + Sec
        } else if (hour === 'time') {
          return H + ':' + Min + ':' + Sec
        } else {
          return Y + M + D
        }
      },
    },
  })
</script>

</html>